<template>
  <div class="home">
    <HeaderBox></HeaderBox>
    <div class="banner">
      <SearchBox class="search-box"></SearchBox>
    </div>
    <div class="content">
      <TabsBox></TabsBox>
    </div>
    <FooterBox></FooterBox>
  </div>
</template>

<script>
import HeaderBox from '@/components/HeaderBox.vue'
import SearchBox from '@/components/SearchBox.vue'
import TabsBox from '@/components/TabsBox.vue'
import FooterBox from '@/components/FooterBox.vue'
export default {
  name: 'Home',
  props: {
  },
  components: {
    HeaderBox: HeaderBox,
    SearchBox: SearchBox,
    TabsBox: TabsBox,
    FooterBox: FooterBox
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.banner {
  background: url('../assets/banner1.jpg') no-repeat center center;
  background-size: cover;
  height: 600px;
  position: relative;
}
.search-box {
  position: absolute;
  left: 50%; top: 60%;
  transform: translate(-50%, -50%)
}
.content {
  background: url('../assets/word_bg.png') #f5f5f5 no-repeat center 15px;
  background-size: 1120px;
  min-height: 200px;
}
</style>
